<template>
  <a-card class="card" :header-style="{height: '64px'}">
    <template #title >
      <div class="title-logo">
        <img src="../assets/logo.svg" style="width: 36px;" alt="logo">
        <span class="title">欢迎使用 OJ 在线判题系统</span>
      </div>
    </template>
    <template #extra>
      <a-link @click="()=> {Message.warning('暂不支持此操作，请联系管理员')}">忘记密码？</a-link>
    </template>
     <div style="padding: 0 20px">
       <a-tabs default-active-key="1">
         <a-tab-pane key="1" title="账号密码登录">
           <div>
             <AccountLogin />
           </div>
         </a-tab-pane>
         <a-tab-pane key="2" title="邮箱验证码登录">
           <div>
             <EmailLogin />
           </div>
         </a-tab-pane>
         <a-tab-pane key="3" title="立即注册">
           <div>
             <Register />
           </div>
         </a-tab-pane>
       </a-tabs>
     </div>
  </a-card>
</template>

<script setup lang="ts">
  import AccountLogin from "../components/AccountLogin.vue";
  import EmailLogin from "../components/EmailLogin.vue";
  import Register from "../components/Register.vue";
  import {Message} from "@arco-design/web-vue";
</script>

<style scoped>
  .card {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .title-logo {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    color: #444444;
    margin-left: 10px;
  }
</style>
